<template>
    <div id="F_info">
      <h4>
        发票信息
      </h4>
      <div class="box">
        <p>
          <span>开具类型：</span>
          <span>个人</span>
        </p>
        <p>
          <span>姓名：</span>
          <span>陈独秀</span>
        </p>
        <p>
          <span>身份证号：</span>
          <span>56215619530215602166</span>
        </p>
        <p>
          <span>邮寄地址：</span>
          <span>镇江时行得拿出大飞机较为15loui78hao</span>
        </p>
        <p>
          <span>联系人姓名：</span>
          <span>李大钊</span>
        </p>
        <p>
          <span>联系人电话：</span>
          <span>15617801519</span>
        </p>
      </div>
      <p class="Isbtn" @click="showP = true">修改</p>

      <Modal title="发票信息" v-model="showP" 
       :style="{top:'60px'}" 
       @on-ok="IsOkD" 
       @on-cancel="ClearnModel">

       <div>
         <p class="ttop">
           <span>开具类型：</span>
           <span>
             <label for="">
               <input type="radio" @change="Change(2)" name="1">企业
               <input type="radio" @change="Change(1)"  checked name="1">个人
             </label>
           </span>
         </p>
       </div>
       <div class="D_box">
         <p>
           <label for="">
             {{add.one}}
           </label>
           <input v-if="GuserData.status == switchNum" v-model="GuserData.name" type="text">
           <input v-else v-model="qiData.name" type="text">
         </p>
         <p>
           <label for="">
             {{add.two}}
           </label>
           <input v-if="GuserData.status == switchNum" v-model="GuserData.UserId" type="text">
           <input v-else v-model="qiData.UserId" type="text">
         </p>
         <p>
           <label for="">
             邮寄地址：
           </label>
           <input  v-if="GuserData.status == switchNum"  v-model="GuserData.adress" type="text">
            <input v-else v-model="qiData.adress" type="text">
         </p>
         <p>
           <label for="">
             联系人姓名：
           </label>
           <input v-if="GuserData.status == switchNum"  v-model="GuserData.Nname" type="text">
           <input v-else v-model="qiData.Nname" type="text">
         </p>
         <p>
           <label for="">
             联系人电话：
           </label>
           <input v-if="GuserData.status == switchNum"  v-model="GuserData.phone" type="text">
           <input v-else v-model="qiData.phone" type="text">
         </p>
       </div>
      </Modal>
    </div>

</template>
<script>
export default {
  data() {
    return {
      showP: false,
      show5: true,
      type: "个人",
      add: {
        one: "姓名：",
        two: "身份证号："
      },
      switchNum: 1,
      GuserData: {},
      qiData: {
        name: "",
        UserId: "",
        adress: "",
        Nname: "",
        phone: "",
        status: null
      }
    };
  },
  computed: {
    Switches() {
      return this.$store.state.comm.XIAOFEI;
    }
  },
  watch: {
    Switches(val) {
      if (val == 3) {
        this.init();
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.GuserData = {
        name: "李大钊",
        UserId: "123456789015235689",
        adress: "浙江社交鞥家电网空调网木到翁默庵端口单位里",
        Nname: "陈独秀",
        phone: "15617801519",
        status: 1
      };
      this.switchNum = 1;
      console.log("this", "3");
    },
    IsOkD() {
      console.log("Modal", "点击");
      console.log(this.switchNum);
    },
    ClearnModel() {},
    Change(num) {
      if (num == 2) {
        this.add.one = "姓名：";
        this.add.two = "身份证号：";
        this.switchNum = num;
      } else {
        this.add.one = "发票抬头：";
        this.add.two = "税务登记证号：";
        this.switchNum = num;
      }
    }
  }
};
</script>
<style scoped>
.D_box {
  margin-left: 10px;
  font-size: 16px;
  overflow: hidden;
}
.D_box p {
  overflow: hidden;
  margin: 16px 0;
}
.D_box p label {
  float: left;
  width: 24%;
}
.D_box p input {
  width: 74%;
  float: left;
  padding-left: 10px;
  font-size: 14px;
}
.ttop {
  font-size: 16px;
  margin-left: 10px;
}
.ttop input {
  width: 30px;
  height: 12px;
  cursor: pointer;
}
#F_info {
  padding: 0 1%;
}
#F_info h4 {
  background-color: rgb(240, 232, 232);
  font-size: 16px;
  padding: 0.4% 1%;
}
.box {
  margin: 0.4% 1.6%;
  font-size: 16px;
}
.box p {
  padding: 0.6%;
  border-bottom: 1px solid rgb(233, 232, 232);
  overflow: hidden;
}
.box p span:first-child {
  float: left;
  width: 12%;
}
.box p span:last-child {
  font-size: 14px;
  color: black;
}
.Isbtn {
  width: 80px;
  background-color: rgb(84, 175, 218);
  text-align: center;
  font-size: 16px;
  color: white;
  margin: 2%;
  padding: 0.61%;
  border-radius: 5px;
  cursor: pointer;
}
</style>

